<template>
  <div class="blogs-container">
    <BaseHeader></BaseHeader>
    <div class="partition">
      <div class="left">
        <el-timeline
          class="mblog"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          v-if="blogs.length > 0"
        >
          <el-timeline-item
            placement="top"
            v-for="(blog, index) in blogs"
            :key="index"
          >
            <router-link
              :to="{ name: 'BlogDetail', params: { blogId: blog.id } }"
            >
              <el-card class="me-area" :body-style="{ padding: '16px' }">
                <div class="me-article-header">
                  <span class="me-article-title">{{ blog.title }}</span>

                  <span class="me-pull-right me-article-count dianzan">
                    <i class="iconfont icon-dianzan"></i>&nbsp;{{
                      blog.likeCounts
                    }}
                  </span>
                  <span class="me-pull-right me-article-count">
                    <i class="el-icon-view"></i>&nbsp;{{ blog.viewCounts }}
                  </span>
                </div>

                <div class="me-artile-description">
                  {{ blog.summary }}
                </div>
                <div class="me-article-footer">
                  <span class="me-article-author">
                    <i class="me-icon-author"></i>&nbsp;{{ blog.username }}
                  </span>
                  <span class="me-pull-right me-article-count">
                    <i class="el-icon-time"></i>&nbsp;{{ blog.createDate }}
                  </span>
                </div>
              </el-card>
            </router-link>
          </el-timeline-item>
        </el-timeline>
        <div class="me-view-end noarticle" v-else>
          <el-alert
            title="该分类暂时没有文章..."
            type="success"
            center
            :closable="false"
          >
          </el-alert>
        </div>
        <el-pagination
          v-show="hasBlogs"
          class="mpage"
          @size-change="handleSizeChange"
          @current-change="page"
          :page-sizes="[2, 3, 4]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
      <div class="right">
        <CardMe class="carme"></CardMe>
        <CardCategory
          class="cardcategory"
          @getHotData="getHotId($event)"
        ></CardCategory>
        <CardHot class="cardhot"></CardHot>
      </div>
    </div>
  </div>
</template>

<script>
import BaseHeader from '../components/BaseHeader.vue'
import CardMe from '../components/card/CardMe.vue'
import CardCategory from '../components/card/CardCategory.vue'
import CardHot from '../components/card/CardHot.vue'
export default {
  name: 'Index.vue',
  components: { BaseHeader, CardMe, CardCategory, CardHot },
  data() {
    return {
      blogs: [],
      mycontext: {},
      currentPage: 1,
      total: 0,
      pageSize: 4,
      hasBlogs: false,
      loading: true,
    }
  },
  methods: {
    page(currentPage) {
      const _this = this
      this.$axios
        .get('/articles?pageNo=' + currentPage + '&limit=' + this.pageSize)
        .then((res) => {
          _this.blogs = res.data.data.list
          _this.blogs.forEach((item, i) => {
            if (item.id == 1) {
              _this.mycontext = item
              _this.blogs.splice(i, 1)
            }
          })
          _this.currentPage = currentPage
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.pageSize
          _this.hasBlogs = true
          _this.loading = false
        })
    },
    handleSizeChange(size) {
      const _this = this
      this.$axios
        .get('/articles?pageNo=' + _this.currentPage + '&limit=' + size)
        .then((res) => {
          _this.blogs = res.data.data.list
          _this.blogs.forEach((item, i) => {
            if (item.id == 1) {
              _this.mycontext = item
              _this.blogs.splice(i, 1)
            }
          })
          _this.currentPage = res.data.data.pageNum
          _this.total = res.data.data.total
          _this.pageSize = res.data.data.pageSize
          _this.hasBlogs = true
          _this.loading = false
        })
    },
    getHotId(data) {
      this.$router.replace = '/index'
      const _this = this
      this.$axios.get('/articles/category/' + data).then((res) => {
        _this.blogs = res.data.data
        _this.blogs.forEach((item, i) => {
          if (item.id == 1) {
            _this.mycontext = item
            _this.blogs.splice(i, 1)
          }
        })
        _this.hasBlogs = true
      })
    },
  },
  created() {
    this.page(1)
  },
}
</script>

<style scoped>
.partition {
  margin: 0 auto;
  display: flex;
}
.left {
  height: 630px;
  box-sizing: border-box;
  position: relative;
  padding-top: 80px;
  padding-right: 20px;
}
.right {
  margin-right: 6%;
  width: 360px;
  padding-right: 10px;
  flex: 3;
}
.mblog {
  padding: 20px;
  margin: -28px;
  margin-left: 84px;
  width: 970px;
}
.noarticle {
  padding: 20px;
  margin-left: 50px !important;
  width: 970px;
}
.me-view-end {
  margin: 0 auto;
  text-align: center;
}
.me-area {
  box-sizing: border-box;
}
a {
  color: #303133;
  text-decoration: none;
}
.cartag {
  margin-top: 10px;
}
.cardhot {
  margin-top: 15px;
}
.mpage {
  position: absolute;
  left: 60%;
  margin-left: -180px;
  bottom: -65px;
}
.cardcategory {
  margin-top: 15px;
}

.carme {
  margin-top: 80px;
}

.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 5px;
}

.me-article-title {
  font-size: 16px;
  font-weight: 600;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 18px;
  font-size: 13px;
}

.el-tag {
  margin-left: 6px;
}
.dianzan {
  margin-top: -3px;
}
</style>
